<!doctype html>
<html>
<head>
	<meta charset="utf8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
	

	<!-- Bootstrap -->
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<!-- Bootstrap responsive -->
	<link rel="stylesheet" href="css/bootstrap-responsive.min.css">
	<!-- CSS for Growl like notifications -->
	<link rel="stylesheet" href="css/jquery.gritter.css">
	<!-- Theme CSS -->
	<!--[if !IE]> -->
	<link rel="stylesheet" href="css/style.css">
	<!-- <![endif]-->
	<!--[if IE]>
	<link rel="stylesheet" href="css/style_ie.css">
	<![endif]-->

	<!-- jQuery -->
	<script src="js/jquery.min.js"></script>
	<!-- smoother animations -->
	<script src="js/jquery.easing.min.js"></script>
	<!-- Bootstrap -->
	<script src="js/bootstrap.min.js"></script>
	<!-- Scrollable navigation -->
	<script src="js/jquery.nicescroll.min.js"></script>
	<!-- Growl Like notifications -->
	<script src="js/jquery.gritter.min.js"></script>

	<!-- Just for demonstration -->
	<script src="js/demonstration.min.js"></script>
	<!-- Theme framework -->
	<script src="js/eakroko.min.js"></script>
	<!-- Theme scripts -->
	<script src="js/application.min.js"></script>
	<link rel="shortcut icon" href="favicon.ico" />
	<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png" />

</head>

<body data-layout="fixed">
	<div id="top"> 
		<div class="container-fluid">
			<div class="pull-left">
				<a href="#" id="brand"><span></span>ease</a>
				<div class="collapse-me">
					<a href="messages.html" class="button">
						<i class="icon-comment icon-white"></i>
						Messages
						<span class="badge badge-important">21</span>
					</a>
					<a href="#" class="button">
						<i class="icon-question-sign icon-white"></i>
						Support tickets
						<span class="badge badge-info">3</span>
					</a>
					<a href="#" class="button">
						<i class="icon-truck icon-white"></i>
						Orders
						<span class="badge badge-default">5</span>
					</a>
				</div>
			</div>
			<div class="pull-right">
				<div class="btn-group">
					<a href="#" class="button dropdown-toggle" data-toggle="dropdown"><i class="icon-white icon-user"></i>John Doe<span class="caret"></span></a>
					<div class="dropdown-menu pull-right">
						<div class="right-details">
							<h6>Logged in as</h6>
							<span class="name">John Doe</span>
							<span class="email">john.doe@example.com</span>
							<a href="#" class="highlighted-link">Need help?</a>
							<ul>
								<li>
									<a href="#">Getting started</a>
								</li>
								<li>
									<a href="#">Account settings</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<a href="index.html" class="button">
					<i class="icon-signout"></i>
					Logout
				</a>
			</div>
		</div>
	</div>

	<div id="main">
		<div id="navigation">
			<div class="search">
				<i class="icon-search icon-white"></i>
				<form action="search-page.html" method="get">
					<input type="text" placeholder="Search here" />
				</form>
				<div class="dropdown">
					<a href="#" class='search-settings dropdown-toggle' data-toggle="dropdown"><i class="icon-cog icon-white"></i></a>
					<ul class="dropdown-menu">
						<li class='sort-by'>
							Sort by <span class='filter'>Categories</span> <span class="order">A-Z</span>
						</li>
						<li class="heading">
							Filter categories
						</li>
						<li class='filter active'>
							Categories
						</li>
						<li class="filter">
							Countries
						</li>
						<li class="filter">
							Likes
						</li>
						<li class="heading">
							Sorting order
						</li>
						<li class='order active'>
							Ascending
						</li>
						<li class="order">
							Descending
						</li>
					</ul>
				</div>
			</div>

			<ul class="mainNav" data-open-subnavs="multi">
				<li>
					<a href="dashboard.html"><i class="icon-home icon-white"></i><span>Dashboard</span></a>
				</li>
				<li>
					<a href="#"><i class="icon-edit icon-white"></i><span>Forms</span><span class="label">4</span></a>
					<ul class="subnav">
						<li>
							<a href="basic-forms.html">Basic forms</a>
						</li>
						<li>
							<a href="extended-forms.html">Extended form elements</a>
						</li>
						<li>
							<a href="form-validation.html">Form validation</a>
						</li>
						<li>
							<a href="form-wizard.html">Form wizard</a>
						</li>
					</ul>
				</li>
				<li class='active open'>
					<a href="#"><i class="icon-th-large icon-white"></i><span>Components</span><span class="label">7</span></a>
					<ul class="subnav">
						<li>
							<a href="messages.html">Messages &amp; Chat</a>
						</li>
						<li>
							<a href="gallery.html">Gallery &amp; thumbs</a>
						</li>
						<li class='active'>
							<a href="icons-buttons.html">Icons &amp; buttons</a>
						</li>
						<li>
							<a href="ui-elements.html">UI Elements</a>
						</li>
						<li>
							<a href="typography.html">Typography</a>
						</li>
						<li>
							<a href="bootstrap-elements.html">Bootstrap elements</a>
						</li>
						<li>
							<a href="grid.html">Grid</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="charts.html"><i class="icon-signal icon-white"></i><span>Charts</span></a>
				</li>
				<li>
					<a href="tables.html"><i class="icon-th-list icon-white"></i><span>Tables</span></a>
				</li>
				<li>
					<a href="error-pages.html"><i class="icon-warning-sign icon-white"></i><span>Error Pages</span></a>
				</li>
				<li>
					<a href="calendar.html"><i class="icon-calendar icon-white"></i><span>Calendar</span></a>
				</li>
				<li>
					<a href="file-management.html"><i class="icon-hdd icon-white"></i><span>File management</span></a>
				</li>
			<li>
					<a href="#"><i class="icon-th icon-white"></i><span>More pages</span><span class="label">4</span></a>
					<ul class="subnav">
						<li>
							<a href="invoice.html">Invoice</a>
						</li>
						<li>
							<a href="search-page.html">Search page</a>
						</li>
						<li>
							<a href="user-profile.html">User profile</a>
						</li>
						<li>
							<a href="blank-page.html">Blank page</a>
						</li>
					</ul>
				</li>
			</ul>
			<div class="status button">
				<div class="status-top">
					<div class="left">
						Saving changes...
					</div>
				</div>
				<div class="status-bottom">
					<div class="progress">
						<div class="bar" style="width:60%">60%</div>
					</div>
				</div>
			</div>
			
		</div>
		<div id="content">
			<div class="page-header">
				<div class="pull-left">
					<h4><i class="icon-edit"></i> Icons &amp; buttons</h4>
				</div>
				<div class="pull-right">
					<ul class="bread">
						<li><a href="dashboard.html">Home</a><span class="divider">/</span></li>
						<li><a href="messages.html">Components<span class="divider">/</span></a></li>
						<li class='active'>Icons &amp; buttons</li>
					</ul>
				</div>
			</div>
			
			<div class="container-fluid" id="content-area">
				<div class="row-fluid">
					<div class="span12">
						<div class="box">
							<div class="box-head">
								<i class="icon-ok-sign"></i>
								<span>Buttons</span>
							</div>
							<div class="box-body">
								<div class="row-fluid">
									<h4>Basic buttons</h4>
								</div>
								<div class="row-fluid">
									<div class="span3">
										<h5>Topbar buttons</h5>
										<button class='button'>Basic button</button>
										<button class='button button-highlighted'>Highlighted</button>
										<button class='button button-less-round'>Less round</button>
									</div>
									<div class="span3">
										<h5>Main buttons</h5>
										<button class='button button-basic'>Button</button>
										<button class='button button-basic-blue'>Blue</button>
										<button class='button button-basic-red'>Red</button>
										<button class='button button-basic-green'>Green</button>
									</div>
									<div class="span3">
										<h5>Disabled buttons</h5>
										<button class='button button-basic disabled' >Button</button>
										<button class='button button-basic-blue disabled' >Blue</button>
										<button class='button button-basic-red disabled'>Red</button>
										<button class='button button-basic-green disabled'>Green</button>
									</div>
									<div class="span3">
										<h5>Toolbar</h5>
										<div class="btn-toolbar">
											<div class="btn-group">
												<button class='button button-basic'>1</button>
												<button class='button button-basic'>2</button>
											</div>
											<div class="btn-group">
												<button class='button button-basic'>3</button>
												<button class='button button-basic'>4</button>
												<button class='button button-basic'>4</button>
											</div>
											<div class="btn-group">
												<button class='button button-basic'>6</button>
												<button class='button button-basic'>7</button>
											</div>
										</div>
									</div>
								</div>
								<div class="row-fluid">
									<div class="span3">
										<h5>Button sizes</h5>
										<button class='button button-basic button-large'>Large</button>
										<button class='button button-basic'>Default</button>
										<button class='button button-basic button-small'>Small</button>
									</div>
									<div class="span3">
										<h5>Dropdowns</h5>
										<div class="dropdown">
											<a href="#" class="button button-basic" data-toggle="dropdown">Action <span class="caret"></span></a>
											<ul class="dropdown-menu">
												<li>
													<a href="#">Action 1</a>
												</li>
												<li>
													<a href="#">Action 2</a>
												</li>
												<li>
													<a href="#">Action 3</a>
												</li>
											</ul>
										</div>
									</div>
									<div class="span3">
										<h5>Split button dropdown</h5>
										<div class="btn-group">
											<div class="dropdown">
												<a href="#" class="button button-basic">Action</a>
												<a href="#" class="button button-basic dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
												<ul class="dropdown-menu">
													<li>
														<a href="#">Action 1</a>
													</li>
													<li>
														<a href="#">Action 2</a>
													</li>
													<li>
														<a href="#">Action 3</a>
													</li>
												</ul>
											</div>
										</div>
									</div>
									<div class="span3">
										<h5>With icons</h5>
										<button class='button button-basic'><i class="icon-cog"></i> Settings</button>
										<button class='button button-basic'><i class="icon-search"></i> Search</button>
										<button class='button button-basic button-basic-blue'><i class="icon-save"></i> Save</button>
										<button class='button button-basic button-icon'><i class="icon-cog"></i></button>
										<button class='button button-basic button-icon'><i class="icon-edit"></i></button>
									</div>
								</div>
								<div class="row-fluid">
									<h4>Quick task buttons</h4>
									<p>You can use 32 different icons for these buttons.</p>
								</div>
								<div class="row-fluid">
									<div class="span12">
										<ul class="quick" data-collapse="collapse">
											<li>
												<a href="#"><img src="img/icons/statistics.png" alt="" /><span>Check statistics</span></a>
											</li>
											<li>
												<a href="#"><img src="img/icons/order-149.png" alt="" /><span>Task list</span></a>
											</li>
											<li>
												<a href="#"><img src="img/icons/shipping.png" alt="" /><span>Recent orders</span></a>
											</li>
											<li>
												<a href="#"><img src="img/icons/my-account.png" alt="" /><span>Account settings</span></a>
											</li>
											<li>
												<a href="#"><img src="img/icons/full-time.png" alt="" /><span>Cronjobs</span></a>
											</li>
											<li>
												<a href="#"><img src="img/icons/date.png" alt="" /><span>Events</span></a>
											</li>
											<li>
												<a href="#"><img src="img/icons/lock.png" alt="" /><span>Security settings</span></a>
											</li>
											<li>
												<a href="#"><img src="img/icons/refresh.png" alt="" /><span>Renew cache</span></a>
											</li>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="row-fluid">
					<div class="span12">
						<div class="box">
							<div class="box-head box-tabs">
								<ul class="tabs">
									<li class="active">
										<a href="#fontawesome" data-toggle="tab">
											<i class="icon-flag"></i>
											Font Awesome
										</a>
									</li>
									<li>
										<a href="#smileys" data-toggle="tab">
											Fugue smileys
										</a>
									</li>
									<li>
										<a href="#pcessen" data-toggle="tab">
											PC Essen
										</a>
									</li>
								</ul>
								<div class="actions">
									<a href="#" rel='tooltip' title="Open in Popup"><i class="icon-external-link"></i></a>
									<a href="#" rel='tooltip' title="Update data" data-placement="left"><i class="icon-refresh"></i></a>
								</div>
							</div>
							<div class="box-body">
								<div class="tab-content">
									<div class="tab-pane active" id="fontawesome">
										<div class="row-fluid">
											<div class="span12">
												<h4>Web Application Icons</h4>
												<p>
													You find these icons here: <a href="http://fortawesome.github.com/Font-Awesome/">http://fortawesome.github.com/Font-Awesome/</a>.
												</p>
											</div>
										</div>
										<div class="row-fluid">
											<div class="span3">
												<ul class="the-icons">
													<li><i class="icon-adjust"></i> icon-adjust</li>
													<li><i class="icon-asterisk"></i> icon-asterisk</li>
													<li><i class="icon-ban-circle"></i> icon-ban-circle</li>
													<li><i class="icon-bar-chart"></i> icon-bar-chart</li>
													<li><i class="icon-barcode"></i> icon-barcode</li>
													<li><i class="icon-beaker"></i> icon-beaker</li>
													<li><i class="icon-beer"></i> icon-beer</li>
													<li><i class="icon-bell"></i> icon-bell</li>
													<li><i class="icon-bell-alt"></i> icon-bell-alt</li>
													<li><i class="icon-bolt"></i> icon-bolt</li>
													<li><i class="icon-book"></i> icon-book</li>
													<li><i class="icon-bookmark"></i> icon-bookmark</li>
													<li><i class="icon-bookmark-empty"></i> icon-bookmark-empty</li>
													<li><i class="icon-briefcase"></i> icon-briefcase</li>
													<li><i class="icon-bullhorn"></i> icon-bullhorn</li>
													<li><i class="icon-calendar"></i> icon-calendar</li>
													<li><i class="icon-camera"></i> icon-camera</li>
													<li><i class="icon-camera-retro"></i> icon-camera-retro</li>
													<li><i class="icon-certificate"></i> icon-certificate</li>
													<li><i class="icon-check"></i> icon-check</li>
													<li><i class="icon-check-empty"></i> icon-check-empty</li>
													<li><i class="icon-circle"></i> icon-circle</li>
													<li><i class="icon-circle-blank"></i> icon-circle-blank</li>
													<li><i class="icon-cloud"></i> icon-cloud</li>
													<li><i class="icon-cloud-download"></i> icon-cloud-download</li>
													<li><i class="icon-cloud-upload"></i> icon-cloud-upload</li>
													<li><i class="icon-coffee"></i> icon-coffee</li>
													<li><i class="icon-cog"></i> icon-cog</li>
													<li><i class="icon-cogs"></i> icon-cogs</li>
													<li><i class="icon-comment"></i> icon-comment</li>
													<li><i class="icon-comment-alt"></i> icon-comment-alt</li>
													<li><i class="icon-comments"></i> icon-comments</li>
													<li><i class="icon-comments-alt"></i> icon-comments-alt</li>
													<li><i class="icon-credit-card"></i> icon-credit-card</li>
													<li><i class="icon-dashboard"></i> icon-dashboard</li>
													<li><i class="icon-desktop"></i> icon-desktop</li>
													<li><i class="icon-download"></i> icon-download</li>
													<li><i class="icon-download-alt"></i> icon-download-alt</li>
												</ul>
											</div>
											<div class="span3">
												<ul class="the-icons">
													<li><i class="icon-edit"></i> icon-edit</li>
													<li><i class="icon-envelope"></i> icon-envelope</li>
													<li><i class="icon-envelope-alt"></i> icon-envelope-alt</li>
													<li><i class="icon-exchange"></i> icon-exchange</li>
													<li><i class="icon-exclamation-sign"></i> icon-exclamation-sign</li>
													<li><i class="icon-external-link"></i> icon-external-link</li>
													<li><i class="icon-eye-close"></i> icon-eye-close</li>
													<li><i class="icon-eye-open"></i> icon-eye-open</li>
													<li><i class="icon-facetime-video"></i> icon-facetime-video</li>
													<li><i class="icon-fighter-jet"></i> icon-fighter-jet</li>
													<li><i class="icon-film"></i> icon-film</li>
													<li><i class="icon-filter"></i> icon-filter</li>
													<li><i class="icon-fire"></i> icon-fire</li>
													<li><i class="icon-flag"></i> icon-flag</li>
													<li><i class="icon-folder-close"></i> icon-folder-close</li>
													<li><i class="icon-folder-open"></i> icon-folder-open</li>
													<li><i class="icon-folder-close-alt"></i> icon-folder-close-alt</li>
													<li><i class="icon-folder-open-alt"></i> icon-folder-open-alt</li>
													<li><i class="icon-food"></i> icon-food</li>
													<li><i class="icon-gift"></i> icon-gift</li>
													<li><i class="icon-glass"></i> icon-glass</li>
													<li><i class="icon-globe"></i> icon-globe</li>
													<li><i class="icon-group"></i> icon-group</li>
													<li><i class="icon-hdd"></i> icon-hdd</li>
													<li><i class="icon-headphones"></i> icon-headphones</li>
													<li><i class="icon-heart"></i> icon-heart</li>
													<li><i class="icon-heart-empty"></i> icon-heart-empty</li>
													<li><i class="icon-home"></i> icon-home</li>
													<li><i class="icon-inbox"></i> icon-inbox</li>
													<li><i class="icon-info-sign"></i> icon-info-sign</li>
													<li><i class="icon-key"></i> icon-key</li>
													<li><i class="icon-leaf"></i> icon-leaf</li>
													<li><i class="icon-laptop"></i> icon-laptop</li>
													<li><i class="icon-legal"></i> icon-legal</li>
													<li><i class="icon-lemon"></i> icon-lemon</li>
													<li><i class="icon-lightbulb"></i> icon-lightbulb</li>
													<li><i class="icon-lock"></i> icon-lock</li>
													<li><i class="icon-unlock"></i> icon-unlock</li>
												</ul>
											</div>
											<div class="span3">
												<ul class="the-icons">
													<li><i class="icon-magic"></i> icon-magic</li>
													<li><i class="icon-magnet"></i> icon-magnet</li>
													<li><i class="icon-map-marker"></i> icon-map-marker</li>
													<li><i class="icon-minus"></i> icon-minus</li>
													<li><i class="icon-minus-sign"></i> icon-minus-sign</li>
													<li><i class="icon-mobile-phone"></i> icon-mobile-phone</li>
													<li><i class="icon-money"></i> icon-money</li>
													<li><i class="icon-move"></i> icon-move</li>
													<li><i class="icon-music"></i> icon-music</li>
													<li><i class="icon-off"></i> icon-off</li>
													<li><i class="icon-ok"></i> icon-ok</li>
													<li><i class="icon-ok-circle"></i> icon-ok-circle</li>
													<li><i class="icon-ok-sign"></i> icon-ok-sign</li>
													<li><i class="icon-pencil"></i> icon-pencil</li>
													<li><i class="icon-picture"></i> icon-picture</li>
													<li><i class="icon-plane"></i> icon-plane</li>
													<li><i class="icon-plus"></i> icon-plus</li>
													<li><i class="icon-plus-sign"></i> icon-plus-sign</li>
													<li><i class="icon-print"></i> icon-print</li>
													<li><i class="icon-pushpin"></i> icon-pushpin</li>
													<li><i class="icon-qrcode"></i> icon-qrcode</li>
													<li><i class="icon-question-sign"></i> icon-question-sign</li>
													<li><i class="icon-quote-left"></i> icon-quote-left</li>
													<li><i class="icon-quote-right"></i> icon-quote-right</li>
													<li><i class="icon-random"></i> icon-random</li>
													<li><i class="icon-refresh"></i> icon-refresh</li>
													<li><i class="icon-remove"></i> icon-remove</li>
													<li><i class="icon-remove-circle"></i> icon-remove-circle</li>
													<li><i class="icon-remove-sign"></i> icon-remove-sign</li>
													<li><i class="icon-reorder"></i> icon-reorder</li>
													<li><i class="icon-reply"></i> icon-reply</li>
													<li><i class="icon-resize-horizontal"></i> icon-resize-horizontal</li>
													<li><i class="icon-resize-vertical"></i> icon-resize-vertical</li>
													<li><i class="icon-retweet"></i> icon-retweet</li>
													<li><i class="icon-road"></i> icon-road</li>
													<li><i class="icon-rss"></i> icon-rss</li>
													<li><i class="icon-screenshot"></i> icon-screenshot</li>
													<li><i class="icon-search"></i> icon-search</li>
												</ul>
											</div>
											<div class="span3">
												<ul class="the-icons">
													<li><i class="icon-share"></i> icon-share</li>
													<li><i class="icon-share-alt"></i> icon-share-alt</li>
													<li><i class="icon-shopping-cart"></i> icon-shopping-cart</li>
													<li><i class="icon-signal"></i> icon-signal</li>
													<li><i class="icon-signin"></i> icon-signin</li>
													<li><i class="icon-signout"></i> icon-signout</li>
													<li><i class="icon-sitemap"></i> icon-sitemap</li>
													<li><i class="icon-sort"></i> icon-sort</li>
													<li><i class="icon-sort-down"></i> icon-sort-down</li>
													<li><i class="icon-sort-up"></i> icon-sort-up</li>
													<li><i class="icon-spinner"></i> icon-spinner</li>
													<li><i class="icon-star"></i> icon-star</li>
													<li><i class="icon-star-empty"></i> icon-star-empty</li>
													<li><i class="icon-star-half"></i> icon-star-half</li>
													<li><i class="icon-tablet"></i> icon-tablet</li>
													<li><i class="icon-tag"></i> icon-tag</li>
													<li><i class="icon-tags"></i> icon-tags</li>
													<li><i class="icon-tasks"></i> icon-tasks</li>
													<li><i class="icon-thumbs-down"></i> icon-thumbs-down</li>
													<li><i class="icon-thumbs-up"></i> icon-thumbs-up</li>
													<li><i class="icon-time"></i> icon-time</li>
													<li><i class="icon-tint"></i> icon-tint</li>
													<li><i class="icon-trash"></i> icon-trash</li>
													<li><i class="icon-trophy"></i> icon-trophy</li>
													<li><i class="icon-truck"></i> icon-truck</li>
													<li><i class="icon-umbrella"></i> icon-umbrella</li>
													<li><i class="icon-upload"></i> icon-upload</li>
													<li><i class="icon-upload-alt"></i> icon-upload-alt</li>
													<li><i class="icon-user"></i> icon-user</li>
													<li><i class="icon-user-md"></i> icon-user-md</li>
													<li><i class="icon-volume-off"></i> icon-volume-off</li>
													<li><i class="icon-volume-down"></i> icon-volume-down</li>
													<li><i class="icon-volume-up"></i> icon-volume-up</li>
													<li><i class="icon-warning-sign"></i> icon-warning-sign</li>
													<li><i class="icon-wrench"></i> icon-wrench</li>
													<li><i class="icon-zoom-in"></i> icon-zoom-in</li>
													<li><i class="icon-zoom-out"></i> icon-zoom-out</li>
												</ul>
											</div>
										</div>
										<div class="row-fluid">
											<h4>Text-Editor Icons</h4>
										</div>
										<div class="row-fluid">
											<div class="span3">
												<ul class="the-icons">
													<li><i class="icon-file"></i> icon-file</li>
													<li><i class="icon-file-alt"></i> icon-file-alt</li>
													<li><i class="icon-cut"></i> icon-cut</li>
													<li><i class="icon-copy"></i> icon-copy</li>
													<li><i class="icon-paste"></i> icon-paste</li>
													<li><i class="icon-save"></i> icon-save</li>
													<li><i class="icon-undo"></i> icon-undo</li>
													<li><i class="icon-repeat"></i> icon-repeat</li>
												</ul>
											</div>
											<div class="span3">
												<ul class="the-icons">
													<li><i class="icon-text-height"></i> icon-text-height</li>
													<li><i class="icon-text-width"></i> icon-text-width</li>
													<li><i class="icon-align-left"></i> icon-align-left</li>
													<li><i class="icon-align-center"></i> icon-align-center</li>
													<li><i class="icon-align-right"></i> icon-align-right</li>
													<li><i class="icon-align-justify"></i> icon-align-justify</li>
													<li><i class="icon-indent-left"></i> icon-indent-left</li>
													<li><i class="icon-indent-right"></i> icon-indent-right</li>
												</ul>
											</div>
											<div class="span3">
												<ul class="the-icons">
													<li><i class="icon-font"></i> icon-font</li>
													<li><i class="icon-bold"></i> icon-bold</li>
													<li><i class="icon-italic"></i> icon-italic</li>
													<li><i class="icon-strikethrough"></i> icon-strikethrough</li>
													<li><i class="icon-underline"></i> icon-underline</li>
													<li><i class="icon-link"></i> icon-link</li>
													<li><i class="icon-paper-clip"></i> icon-paper-clip</li>
													<li><i class="icon-columns"></i> icon-columns</li>
												</ul>
											</div>
											<div class="span3">
												<ul class="the-icons">
													<li><i class="icon-table"></i> icon-table</li>
													<li><i class="icon-th-large"></i> icon-th-large</li>
													<li><i class="icon-th"></i> icon-th</li>
													<li><i class="icon-th-list"></i> icon-th-list</li>
													<li><i class="icon-list"></i> icon-list</li>
													<li><i class="icon-list-ol"></i> icon-list-ol</li>
													<li><i class="icon-list-ul"></i> icon-list-ul</li>
													<li><i class="icon-list-alt"></i> icon-list-alt</li>
												</ul>
											</div>
										</div>
										<div class="row-fluid">
											<h4>Directional Icons</h4>
										</div>
										<div class="row-fluid">
											<div class="span3">
												<ul class="the-icons">
													<li><i class="icon-angle-left"></i> icon-angle-left</li>
													<li><i class="icon-angle-right"></i> icon-angle-right</li>
													<li><i class="icon-angle-up"></i> icon-angle-up</li>
													<li><i class="icon-angle-down"></i> icon-angle-down</li>
													<li><i class="icon-arrow-down"></i> icon-arrow-down</li>
													<li><i class="icon-arrow-left"></i> icon-arrow-left</li>
													<li><i class="icon-arrow-right"></i> icon-arrow-right</li>
													<li><i class="icon-arrow-up"></i> icon-arrow-up</li>
												</ul>
											</div>
											<div class="span3">
												<ul class="the-icons">
													<li><i class="icon-caret-down"></i> icon-caret-down</li>
													<li><i class="icon-caret-left"></i> icon-caret-left</li>
													<li><i class="icon-caret-right"></i> icon-caret-right</li>
													<li><i class="icon-caret-up"></i> icon-caret-up</li>
													<li><i class="icon-chevron-down"></i> icon-chevron-down</li>
													<li><i class="icon-chevron-left"></i> icon-chevron-left</li>
													<li><i class="icon-chevron-right"></i> icon-chevron-right</li>
													<li><i class="icon-chevron-up"></i> icon-chevron-up</li>
												</ul>
											</div>
											<div class="span3">
												<ul class="the-icons">
													<li><i class="icon-circle-arrow-down"></i> icon-circle-arrow-down</li>
													<li><i class="icon-circle-arrow-left"></i> icon-circle-arrow-left</li>
													<li><i class="icon-circle-arrow-right"></i> icon-circle-arrow-right</li>
													<li><i class="icon-circle-arrow-up"></i> icon-circle-arrow-up</li>
													<li><i class="icon-double-angle-left"></i> icon-double-angle-left</li>
													<li><i class="icon-double-angle-right"></i> icon-double-angle-right</li>
													<li><i class="icon-double-angle-up"></i> icon-double-angle-up</li>
													<li><i class="icon-double-angle-down"></i> icon-double-angle-down</li>
												</ul>
											</div>
											<div class="span3">
												<ul class="the-icons">
													<li><i class="icon-hand-down"></i> icon-hand-down</li>
													<li><i class="icon-hand-left"></i> icon-hand-left</li>
													<li><i class="icon-hand-right"></i> icon-hand-right</li>
													<li><i class="icon-hand-up"></i> icon-hand-up</li>
													<li><i class="icon-circle"></i> icon-circle</li>
													<li><i class="icon-circle-blank"></i> icon-circle-blank</li>
												</ul>
											</div>
										</div>
										<div class="row-fluid">
											<h4>Video Player Icons</h4>
										</div>
										<div class="row-fluid">
											<div class="span3">
												<ul class="the-icons">
													<li><i class="icon-play-circle"></i> icon-play-circle</li>
													<li><i class="icon-play"></i> icon-play</li>
													<li><i class="icon-pause"></i> icon-pause</li>
													<li><i class="icon-stop"></i> icon-stop</li>
												</ul>
											</div>
											<div class="span3">
												<ul class="the-icons">
													<li><i class="icon-step-backward"></i> icon-step-backward</li>
													<li><i class="icon-fast-backward"></i> icon-fast-backward</li>
													<li><i class="icon-backward"></i> icon-backward</li>
													<li><i class="icon-forward"></i> icon-forward</li>
												</ul>
											</div>
											<div class="span3">
												<ul class="the-icons">
													<li><i class="icon-fast-forward"></i> icon-fast-forward</li>
													<li><i class="icon-step-forward"></i> icon-step-forward</li>
													<li><i class="icon-eject"></i> icon-eject</li>
												</ul>
											</div>
											<div class="span3">
												<ul class="the-icons">
													<li><i class="icon-fullscreen"></i> icon-fullscreen</li>
													<li><i class="icon-resize-full"></i> icon-resize-full</li>
													<li><i class="icon-resize-small"></i> icon-resize-small</li>
												</ul>
											</div>
										</div>
										<div class="row-fluid">
											<h4>Social Icons</h4>
										</div>
										<div class="row-fluid">
											<div class="span3">
												<ul class="the-icons">
													<li><i class="icon-phone"></i> icon-phone</li>
													<li><i class="icon-phone-sign"></i> icon-phone-sign</li>
													<li><i class="icon-facebook"></i> icon-facebook</li>
													<li><i class="icon-facebook-sign"></i> icon-facebook-sign</li>
												</ul>
											</div>
											<div class="span3">
												<ul class="the-icons">
													<li><i class="icon-twitter"></i> icon-twitter</li>
													<li><i class="icon-twitter-sign"></i> icon-twitter-sign</li>
													<li><i class="icon-github"></i> icon-github</li>
													<li><i class="icon-github-alt"></i> icon-github-alt</li>
												</ul>
											</div>
											<div class="span3">
												<ul class="the-icons">
													<li><i class="icon-github-sign"></i> icon-github-sign</li>
													<li><i class="icon-linkedin"></i> icon-linkedin</li>
													<li><i class="icon-linkedin-sign"></i> icon-linkedin-sign</li>
													<li><i class="icon-pinterest"></i> icon-pinterest</li>
												</ul>
											</div>
											<div class="span3">
												<ul class="the-icons">
													<li><i class="icon-pinterest-sign"></i> icon-pinterest-sign</li>
													<li><i class="icon-google-plus"></i> icon-google-plus</li>
													<li><i class="icon-google-plus-sign"></i> icon-google-plus-sign</li>
													<li><i class="icon-sign-blank"></i> icon-sign-blank</li>
												</ul>
											</div>
										</div>
										<div class="row-fluid">
											<h4>Medical Icons</h4>
										</div>
										<div class="row-fluid">
											<div class="span3">
												<ul class="the-icons">
													<li><i class="icon-ambulance"></i> icon-ambulance</li>
													<li><i class="icon-beaker"></i> icon-beaker</li>
												</ul>
											</div>
											<div class="span3">
												<ul class="the-icons">
													<li><i class="icon-h-sign"></i> icon-h-sign</li>
													<li><i class="icon-hospital"></i> icon-hospital</li>
												</ul>
											</div>
											<div class="span3">
												<ul class="the-icons">
													<li><i class="icon-medkit"></i> icon-medkit</li>
													<li><i class="icon-plus-sign-alt"></i> icon-plus-sign-alt</li>
												</ul>
											</div>
											<div class="span3">
												<ul class="the-icons">
													<li><i class="icon-stethoscope"></i> icon-stethoscope</li>
													<li><i class="icon-user-md"></i> icon-user-md</li>
												</ul>
											</div>
										</div>
									</div>
									<div class="tab-pane" id="smileys">
										<div class="row-fluid">
											<div class="span12">
												<h4>Fugue Icons</h4>
												<p>
													You find these icons here: <a href="http://p.yusukekamiyamane.com/">http://p.yusukekamiyamane.com/</a>.
												</p>
											</div>
										</div>
										<div class="row-fluid">
											<div class="span3">
												<ul class="the-icons">
													<li>
														<img src="img/icons/smiley.png" alt=""> smiley
													</li>
													<li>
														<img src="img/icons/smiley-zipper.png" alt=""> smiley-zipper
													</li>
													<li>
														<img src="img/icons/smiley-yell.png" alt=""> smiley-yell
													</li>
													<li>
														<img src="img/icons/smiley-wink.png" alt=""> smiley-wink
													</li>
													<li>
														<img src="img/icons/smiley-twist.png" alt=""> smiley-twist
													</li>
													<li>
														<img src="img/icons/smiley-grin.png" alt=""> smiley-grin
													</li>
												</ul>
											</div>
											<div class="span3">
												<ul class="the-icons">
													<li>
														<img src="img/icons/smiley-sweat.png" alt=""> smiley-sweat
													</li>
													<li>
														<img src="img/icons/smiley-surprise.png" alt=""> smiley-surprise
													</li>
													<li>
														<img src="img/icons/smiley-slim.png" alt=""> smiley-slim
													</li>
													<li>
														<img src="img/icons/smiley-sleep.png" alt=""> smiley-sleep
													</li>
													<li>
														<img src="img/icons/smiley-sad.png" alt=""> smiley-sad
													</li>
													<li>
														<img src="img/icons/smiley-fat.png" alt=""> smiley-fat
													</li>
												</ul>
											</div>
											<div class="span3">
												<ul class="the-icons">
													<li>
														<img src="img/icons/smiley-roll.png" alt=""> smiley-roll
													</li>
													<li>
														<img src="img/icons/smiley-red.png" alt=""> smiley-red
													</li>
													<li>
														<img src="img/icons/smiley-razz.png" alt=""> smiley-razz
													</li>
													<li>
														<img src="img/icons/smiley-neutral.png" alt=""> smiley-neutral
													</li>
													<li>
														<img src="img/icons/smiley-nerd.png" alt=""> smiley-nerd
													</li>
													<li>
														<img src="img/icons/smiley-eek.png" alt=""> smiley-eek
													</li>
												</ul>
											</div>
											<div class="span3">
												<ul class="the-icons">
													<li>
														<img src="img/icons/smiley-neutral.png" alt=""> smiley-neutral
													</li>
													<li>
														<img src="img/icons/smiley-mad.png" alt=""> smiley-mad
													</li>
													<li>
														<img src="img/icons/smiley-lol.png" alt=""> smiley-lol
													</li>
													<li>
														<img src="img/icons/smiley-kitty.png" alt=""> smiley-kitty
													</li>
													<li>
														<img src="img/icons/smiley-kiss.png" alt=""> smiley-kiss
													</li>
													<li>
														<img src="img/icons/smiley-draw.png" alt=""> smiley-draw
													</li>
												</ul>
											</div>
										</div>
									</div>
									<div class="tab-pane" id="pcessen">
										<div class="row-fluid">
											<h4>PC Essen icons</h4>
											<p>
												You find these icons here: <a href="http://pc.de/icons/#Essen">http://pc.de/icons/#Essen</a>.
											</p>
										</div>
										<div class="row-fluid">
											<div class="span3">
												<ul class="the-icons">
													
													<li><img src='img/icons/address.png'> address</li><li><img src='img/icons/administrative-docs.png'> administrative-docs</li><li><img src='img/icons/advertising.png'> advertising</li><li><img src='img/icons/archives.png'> archives</li><li><img src='img/icons/attibutes.png'> attibutes</li><li><img src='img/icons/bank.png'> bank</li><li><img src='img/icons/basket.png'> basket</li><li><img src='img/icons/bestseller.png'> bestseller</li><li><img src='img/icons/billing.png'> billing</li><li><img src='img/icons/bookmark.png'> bookmark</li><li><img src='img/icons/brainstorming.png'> brainstorming</li><li><img src='img/icons/business-contact.png'> business-contact</li><li><img src='img/icons/busy.png'> busy</li><li><img src='img/icons/calendar.png'> calendar</li><li><img src='img/icons/category.png'> category</li><li><img src='img/icons/check.png'> check</li><li><img src='img/icons/collaboration.png'> collaboration</li><li><img src='img/icons/comment.png'> comment</li><li><img src='img/icons/communication.png'> communication</li><li><img src='img/icons/config.png'> config</li><li><img src='img/icons/consulting.png'> consulting</li><li><img src='img/icons/contact.png'> contact</li><li><img src='img/icons/cost.png'> cost</li><li><img src='img/icons/credit-card.png'> credit-card</li><li><img src='img/icons/credit.png'> credit</li>
												</ul>
											</div>
											<div class="span3">
												<ul class="the-icons">
													<li><img src='img/icons/current-work.png'> current-work</li><li><img src='img/icons/customers.png'> customers</li><li><img src='img/icons/cv.png'> cv</li><li><img src='img/icons/database.png'> database</li><li><img src='img/icons/date.png'> date</li><li><img src='img/icons/delicious.png'> delicious</li><li><img src='img/icons/document-library.png'> document-library</li><li><img src='img/icons/donate.png'> donate</li><li><img src='img/icons/drawings.png'> drawings</li><li><img src='img/icons/edit.png'> edit</li><li><img src='img/icons/email.png'> email</li><li><img src='img/icons/facebook.png'> facebook</li><li><img src='img/icons/featured.png'> featured</li><li><img src='img/icons/feed.png'> feed</li><li><img src='img/icons/finished-work.png'> finished-work</li><li><img src='img/icons/flag.png'> flag</li><li><img src='img/icons/folder.png'> folder</li><li><img src='img/icons/free-for-job.png'> free-for-job</li><li><img src='img/icons/freelance.png'> freelance</li><li><img src='img/icons/full-time.png'> full-time</li><li><img src='img/icons/future-projects.png'> future-projects</li><li><img src='img/icons/graphic-design.png'> graphic-design</li><li><img src='img/icons/heart.png'> heart</li><li><img src='img/icons/hire-me.png'> hire-me</li><li><img src='img/icons/home.png'> home</li>
												</ul>
											</div>
											<div class="span3">
												<ul class="the-icons">
													<li><img src='img/icons/illustration.png'> illustration</li><li><img src='img/icons/invoice.png'> invoice</li><li><img src='img/icons/issue.png'> issue</li><li><img src='img/icons/library.png'> library</li><li><img src='img/icons/lightbulb.png'> lightbulb</li><li><img src='img/icons/limited-edition.png'> limited-edition</li><li><img src='img/icons/link.png'> link</li><li><img src='img/icons/lock.png'> lock</li><li><img src='img/icons/login.png'> login</li><li><img src='img/icons/logout.png'> logout</li><li><img src='img/icons/milestone.png'> milestone</li><li><img src='img/icons/my-account.png'> my-account</li><li><img src='img/icons/networking.png'> networking</li><li><img src='img/icons/old-versions.png'> old-versions</li><li><img src='img/icons/order-149.png'> order-149</li><li><img src='img/icons/order.png'> order</li><li><img src='img/icons/payment-card.png'> payment-card</li><li><img src='img/icons/paypal.png'> paypal</li><li><img src='img/icons/pc.png'> pc</li><li><img src='img/icons/pen.png'> pen</li><li><img src='img/icons/pencil.png'> pencil</li><li><img src='img/icons/phone.png'> phone</li><li><img src='img/icons/photography.png'> photography</li><li><img src='img/icons/plus.png'> plus</li><li><img src='img/icons/premium.png'> premium</li>
												</ul>
											</div>
											<div class="span3">
												<ul class="the-icons">
													<li><img src='img/icons/print.png'> print</li><li><img src='img/icons/process.png'> process</li><li><img src='img/icons/product-163.png'> product-163</li><li><img src='img/icons/product-design.png'> product-design</li><li><img src='img/icons/product.png'> product</li><li><img src='img/icons/project.png'> project</li><li><img src='img/icons/publish.png'> publish</li><li><img src='img/icons/refresh.png'> refresh</li><li><img src='img/icons/search.png'> search</li><li><img src='img/icons/settings.png'> settings</li><li><img src='img/icons/shipping.png'> shipping</li><li><img src='img/icons/showreel.png'> showreel</li><li><img src='img/icons/sign-in.png'> sign-in</li><li><img src='img/icons/sign-out.png'> sign-out</li><li><img src='img/icons/sign-up.png'> sign-up</li><li><img src='img/icons/sitemap.png'> sitemap</li><li><img src='img/icons/special-offer.png'> special-offer</li><li><img src='img/icons/star.png'> star</li><li><img src='img/icons/statistics.png'> statistics</li><li><img src='img/icons/suppliers.png'> suppliers</li><li><img src='img/icons/tag.png'> tag</li><li><img src='img/icons/ticket.png'> ticket</li><li><img src='img/icons/twitter.png'> twitter</li><li><img src='img/icons/upcoming-work.png'> upcoming-work</li><li><img src='img/icons/user.png'> user</li><li><img src='img/icons/world.png'> world</li><li><img src='img/icons/zoom.png'> zoom</li>
												</ul>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
<div class="navi-functions">
		<div class="btn-group btn-group-custom">
			<a href="#" class="button button-square layout-not-fixed notify" rel="tooltip" title="Toggle fixed-nav" data-notify-message="Fixed nav is now {{state}}" data-notify-title="Toggled fixed nav">
				<i class="icon-unlock"></i>
			</a>
			<a href="#" class="button button-square layout-not-fluid notify button-active" rel="tooltip" title="Toggle fixed-layout" data-notify-message="Fixed layout is now {{state}}" data-notify-title="Toggled fixed layout">
				<i class="icon-exchange"></i>
			</a>
			<a href="#" class="button button-square notify notify-inverse layout-no-nav" rel="tooltip" title="Toggle navigation" data-notify-message="Navigation is now {{state}}" data-notify-title="Toggled navigation">
				<i class="icon-arrow-left"></i>
			</a>
			<a href="#" class="button button-square button-active force-last notify-toggle toggle-active notify" rel="tooltip" title="Toggle notification"  data-notify-message="Notifications turned {{state}}" data-notify-title="Toggled notifications">
				<i class="icon-bullhorn"></i>
			</a>
		</div>
	</div>

</body>
</html>
